<template>
    <div class="login_container">
        <!--登录块-->
        <div class="login_box">
            <!--logo-->
            <div class="avatar_box">
                <img class="avatar" src="../assets/icon/logo_full.png"/>
            </div>
            <!--表单区域
                ref:为组件指定一个id,进行访问
            -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login_form" label-width="80px">
                <!--用户名-->
                <el-form-item prop="username">
                    <el-input clearable placeholder="请输入账号" maxlength="11" v-model="loginForm.username" prefix-icon="iconfont icondenglu"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <el-input show-password placeholder="请输入密码" maxlength="20" v-model="loginForm.password" prefix-icon="iconfont iconmima" type="password"></el-input>
                </el-form-item>
                <!--验证码-->
                <el-row class="verifyCode">
                    <!--验证码输入框-->
                    <el-col :span="14">
                        <div class="grid-content bg-purple">
                            <el-form-item prop="verifyCode">
                                <el-input clearable placeholder="请输入验证码" maxlength="4" v-model="loginForm.verifyCode" prefix-icon="iconfont iconshu"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--验证码展示区-->
                    <el-col :span="6" :offset="3">
                        <div class="grid-content bg-purple-light">
                            <!--执行空跳转-->
                            <a href="javascript:;" @click="changeCodeImg">
                                <img class="CodeImg" :src="codeImg" alt="验证码加载失败" />
                            </a>
                        </div>
                    </el-col>
                </el-row>
                <!--按钮-->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetLoginForm" plain>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default{
    //加载此页面时调用
    created(){
        this.codeImg="http://localhost:9000/getVerifyCode"
    },
    data(){
        return{
            codeImg:"",
            //表单数据对象
            loginForm:{
                username:"",
                password:"",
                verifyCode:""
            },
            //验证对象
            loginRules:{
                username:[
                    { required: true, message: '用户名为必填项', trigger: 'blur' },
                    { min:11,max:11,message: '账号长度为11位字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '用户密码为必填项', trigger: 'blur' },
                    { min:6, max:20, message: '密码长度为6~20位字符', trigger: 'blur' }
                ],
                verifyCode:[
                    {required: true, message:'验证码为必填项', trigger:'blur'},
                    {min:4,max:4,message:'验证码长度为4位字符',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        //重置表单内容
        resetLoginForm(){
            this.$refs.loginFormRef.resetFields(); //重置表单方法
        },
        //登录
        login(){
            //验证
            this.$refs.loginFormRef.validate(async valid=>{
                //前端验证失败(长度、是否填写等)
                if(!valid){
                    this.$message.error("登录失败，请检查是否填写有误！")
                }
                //前端校验成功
                else{
                    //请求servlet，返回res
                    const{data:res}=await this.$http.post("/login",this.loginForm)
                    if(res=="success"){
                        this.$message.success("登录成功！")
                        //跳转页面
                        this.$router.push({path:"/home"})
                    }else if(res=="usernameError"){
                        this.$message.error("账号不存在！")
                    }else if(res=="passwordError"){
                        this.$message.error("密码有误！")
                    }else{
                        this.$message.error("验证码有误！")
                        this.changeCodeImg() //用于输入验证码错误后，自动给予新验证码
                    }
                }
            })
        },
        //修改验证码
        changeCodeImg(){
            var num=Math.ceil(Math.random()*10);
            this.codeImg="http://localhost:9000/getVerifyCode?"+num
        }
    }
}
</script>
<style lang="less" scoped>
    .login_container{
        background-image:url('../assets/img/back.jpg');
        height:100%;
    }
    .login_box{
        width:450px;
        height:300px;
        background-color:rgba(255,255,255,0.75);
        border-radius:5px;
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    .avatar_box{
        width:150px;
        height:150px;
        border-radius:50%;
        padding:10px;
        box-shadow:0 0 15px #ddd;
        position:absolute;
        left:50%;
        transform:translate(-50%,-75%);
        //background-color:rgb(210,210,210);
        background-color:#eee;
        user-select:none;
        z-index:5;/*图层上移*/
    }
    .avatar{
        width:100%;
        height:100%;
        border-radius:50%;
        background-color:#eee;        
    }
    .btns{
        display:flex;
        justify-content:space-between;
        .el-button{
            margin:0 25px 0 25px;
        }
    }
    .login_form{
        position:absolute;
        padding-right:50px;
        bottom: 0%;
        width:100%;
        box-sizing:border-box;
    }
    .CodeImg{
        height:40px;
        border:solid 1px rgb(197, 193, 193);
    }
</style>